<template>
  <div class="form-group has-feedback" :class="groupClass" v-show="schema.type!='hidden'">
    <label v-if="schema.label">{{schema.label}} 
      <span class="control-label-required"  v-if="schema.required"> * </span>
    </label>
    <slot></slot>
    <p class="help-block" v-if="schema.helpText">{{schema.helpText}}</p>
    <p class="help-block" v-for="(val, key) in validation" v-if="validation.$error&&key[0]!='$'&&!validation[key]">{{messages[key]||'Field is Invalid'}}</p>
  </div>
</template>
<script>
import messages from './messages'
export default {
  name: 'FormGroup',
  props: {
    schema: {
      type: Object,
      default () {
        return {}
      }
    },
    validation: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      messages: messages
    }
  },
  computed: {
    groupClass () {
      var groupClass = {
        'has-error': this.validation.$error,
        'col': this.schema.col
      }
      if (this.schema.col) {
        groupClass[`col-sm-${this.schema.col}`] = true  
      }
      if (this.schema.offset) {
        groupClass[`col-sm-offset-${this.schema.col}`] = true  
      }
      return groupClass
    }
  }
}
</script>
<style>
</style>